<template>
	<view class="u-waterfall">
		<view id="u-left-column" class="u-column u-left-column">
			<view v-for="(item, index) in leftList" :key="index" class="goods-item" @click="route(item)">
				<view class="image">
					<image class="img" :src="item.cover_pic" :lazy-load="true"></image>
					<view class="no-goods" v-if="item.goods_stock == 0">
						<view class="no-title">
							已售
						</view>
					</view>
					<!-- 9.28 11.12 v-if="godstype != 'huangjin'" -->
					<view class="sendcoin" v-if="mall_id == 1">
						成交后送{{item.original_price_discount}}金币
					</view>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
				<view class="price">
					定金 {{'￥' + item.price}}
				</view>
				<!-- <view class="price">
					全款 {{'￥' + item.original_price}}
				</view>
				<view class="price decora">
					市场价 {{'￥' + item.cost_price}}
				</view>
				<view class="subtitle u-line-2">
					{{item.subtitle}}
				</view> -->
				<!-- 9.28 -->
				<view class="subtitle u-line-2">
					<!-- 去实体店体验 -->去实体店付<text class="disprice">余款{{item.original_discount_price}}元</text>
				</view>
				<!-- 9.30 抵用金币和赠送金币 11.12黄金 -->
				<view class="goldsd" v-if="mall_id == 1">
					<!-- 10.12 白条金币可抵 10.14 可抵购后返 11.12 黄金不抵金币 -->
					<text class="golds" v-if="godstype != 'huangjin'">
						金币可抵{{item.original_discount_price1}}元
					</text>
					<text class="goldd">
						线下成交后可返{{item.original_price_discount}}金币
					</text>
				</view>
			</view>
		</view>
		<view id="u-right-column" class="u-column u-right-column">
			<view v-for="(item, index) in rightList" :key="index" class="goods-item" @click="route(item)">
				<view class="image">
					<image class="img" :src="item.cover_pic" :lazy-load="true"></image>
					<view class="no-goods" v-if="item.goods_stock == 0">
						<view class="no-title">
							已售
						</view>
					</view>
					<!-- 9.28 11.12 v-if="godstype != 'huangjin'" -->
					<view class="sendcoin" v-if="mall_id == 1">
						成交后送{{item.original_price_discount}}金币
					</view>
				</view>
				<view class="title u-line-2">
					{{item.name}}
				</view>
				<view class="price">
					定金 {{'￥' + item.price}}
				</view>
				<!-- <view class="price">
					全款 {{'￥' + item.original_price}}
				</view>
				<view class="price decora">
					市场价 {{'￥' + item.cost_price}}
				</view>
				<view class="subtitle u-line-2">
					{{item.subtitle}}
				</view> -->
				<!-- 9.28 -->
				<view class="subtitle u-line-2">
					<!-- 去实体店体验 -->去实体店付<text class="disprice">余款{{item.original_discount_price}}元</text>
				</view>
				<!-- 9.30 抵用金币和赠送金币 -->
				<view class="goldsd" v-if="mall_id == 1">
					<!-- 10.12 白条金币可抵 10.14 可抵购后返 11.12 黄金不抵金币  -->
					<text class="golds" v-if="godstype != 'huangjin'">
						金币可抵{{item.original_discount_price1}}元
					</text>
					<text class="goldd">
						线下成交后可返{{item.original_price_discount}}金币
					</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";

	export default {
		name: "u-goods-ware",
		props: {
			value: {
				type: Array,
				required: true,
				default: function() {
					return [];
				}
			},
			addTime: {
				type: [Number, String],
				default: 200
			},
			godstype: {
				type: String
			},
			mall_id: {
				type: Number,
				default: 1
			}
		},
		provide() {
			return {
				uWaterfall: this
			}
		},
		data() {
			return {
				leftList: [],
				rightList: [],
				tempList: [],
				children: [],
				attrShow: 0,
				goods: null
			}
		},
		watch: {
			copyFlowList(nVal, oVal) {
				let startIndex = Array.isArray(oVal) && oVal.length > 0 ? oVal.length : 0;
				if (nVal.length == 0) {
					this.emptyList()
				} else {
					this.tempList = this.tempList.concat(this.cloneData(nVal.slice(startIndex)));
				}
				this.splitData();
			}
		},
		mounted() {
			this.tempList = this.cloneData(this.copyFlowList);
			this.splitData();
		},
		computed: {
			copyFlowList() {
				return this.cloneData(this.value);
			}
		},
		methods: {
			async splitData() {
				if (!this.tempList.length) return;
				let leftRect = await this.uGetRect('#u-left-column');
				let rightRect = await this.uGetRect('#u-right-column');
				let item = this.tempList[0];
				if (!item) return;
				if (leftRect.height < rightRect.height) {
					this.leftList.push(item);
				} else if (leftRect.height > rightRect.height) {
					this.rightList.push(item);
				} else {
					if (this.leftList.length <= this.rightList.length) {
						this.leftList.push(item);
					} else {
						this.rightList.push(item);
					}
				}
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			cloneData(data) {
				return JSON.parse(JSON.stringify(data));
			},

			uGetRect(element) {
				return new Promise((resolve) => {
					const query = uni.createSelectorQuery().in(this);
					query.select(element).boundingClientRect(data => {
						resolve(data);
					}).exec();
				})
			},

			buy(item) {
				this.goods = item;
				this.attrShow = Math.random();
			},

			route(item) {
				/* if (item.url == '/pages/index/index' || item.url.indexOf('/pages/gospeed/index') != -1 || item.url ==
					'/pages/sixty/index' || item.url == '/pages/user-center/user-center' || item.url ==
					'/pages/store/mine/mine') {
					uni.redirectTo({
						url: item.url
					})
					return;
				} */
				this.$emit('routego', item)
			},
			emptyList() {
				this.leftList = [];
				this.tempList = [];
				this.rightList = [];
			}
		},
	}
</script>

<style lang="scss" scoped>
	// 9.30 抵金币 和赠送
	.goldsd {
		margin: 8rpx 14rpx 24rpx;
		// 10.8 修改文字大小 10.14 修改文字大小
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: bold;

		.golds {
			border: 2rpx solid #e6993f;
			color: #e6993f;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
		}

		.goldd {
			// 10.14 注释左加上
			// margin-left: 8rpx;
			margin-top: 2rpx;
			border: 2rpx solid #c24341;
			color: #c24341;
			padding: 2rpx;
			border-radius: 8rpx;
			display: inline-block;
		}
	}

	.u-waterfall {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-around;
	}

	.u-column {
		display: flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.u-image {
		width: 100%;
	}

	.u-right-column {
		margin-right: 24upx;
		margin-left: 7upx;
	}

	.u-left-column {
		margin-left: 24upx;
		margin-right: 7upx;
	}

	.demo-image {
		width: 350rpx;
	}

	.goods-item {
		width: 350rpx;
		background-color: #fff;
		// margin-top: 20upx;
		margin: 20rpx 0;
		overflow: hidden;
		border-radius: 16upx;
		box-shadow: 0px 30rpx 60rpx rgba(57, 57, 57, 0.1);
	}

	.goods-title {
		/* font-size: 26upx;
		color: #373737; */
		padding: 0 20upx;
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
	}

	.image {
		width: 100%;
		// height: 470rpx;
		height: 350rpx;
		position: relative;

		.img {
			width: 100%;
			height: 100%;
		}

		// 9.28
		.sendcoin {
			position: absolute;
			bottom: 10rpx;
			right: 10rpx;
			background-color: #ff0000;
			color: #FFFFFF;
			font-size: 24rpx;
			padding: 4rpx 8rpx;
			border-radius: 32rpx;
		}

		.no-goods {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			margin: 0 auto;

			.no-title {
				width: 124rpx;
				height: 124rpx;
				border-radius: 50%;
				background-color: rgba($color: #000000, $alpha: 0.5);
				backdrop-filter: blur(9px);
				font-size: 36rpx;
				text-align: center;
				line-height: 124rpx;
				color: #FFFFFF;
				font-weight: bold;
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}
	}

	.title {
		margin: 8rpx 14rpx 16rpx;
		font-size: 24rpx;
		font-weight: 700;
		line-height: 36rpx;
		color: rgba(0, 0, 0, 0.84);
	}

	.price {
		margin: 8rpx 14rpx;
		color: #FF5238;
		font-weight: 600;
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.decora {
		text-decoration: line-through;
	}

	.subtitle {
		// margin: 8rpx 14rpx 24rpx;
		margin: 8rpx 14rpx 8rpx;
		font-size: 24rpx;
		line-height: 36rpx;
		// color: rgba(93, 93, 93, 0.8);
		color: rgba(0, 0, 0, 0.8);
		font-weight: bold;

		// 9.28
		.disprice {
			color: #ff0000;
		}
	}

	.goods-content {
		padding: 0 20upx;
		margin: 12upx 0 28upx 0;
	}

	.describe {
		font-size: 24rpx;
		line-height: 36rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 0.84);
		// font-size: 22upx;
	}

	.content {
		/* font-size: 18upx;
		color: #b0b0b0; */
		color: rgba(0, 0, 0, 0.64);
		font-size: 20rpx;
		line-height: 36rpx;
		font-weight: 700;
	}
</style>
